<template>
    <div class="bigBox">
        <header>
            <div class="store-name">小桃优品</div>
            <div class="search">
                <div class="search-box">
                    <van-icon name="search" size="22" />
                    <input type="text" placeholder="搜索您感兴趣的商品">
                </div>
                <span>搜索</span>
            </div>
            <div class="index-type">
                <div class="type-item" @click="priceLow">
                    <div class="icon">
                        <img src="../../images/icon1.png" alt="">
                    </div> 
                    周边特惠
                </div>

                <div class="type-item" @click="aroundRanking">
                    <div class="icon">
                        <img src="../../images/icon5.png" alt="">
                    </div> 
                    周边排行
                </div>

                <div class="type-item" @click="Move">
                    <div class="icon">
                        <img src="../../images/icon2.png" alt="">
                    </div> 
                    观影推荐
                </div>
                <div class="type-item" @click="newMove">
                    <div class="icon">
                        <img src="../../images/icon3.png" alt="">
                    </div> 
                    电影排行
                </div>
            </div>
        </header>
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerList" :key="item">
                    <img :src="baseUrl + item" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>

        <List :productList='productList'/>
    </div>
</template>

<script>
    import { getBanner, getAroundProduct, getShowProduct, getMovieProduct, getProductInfo } from '../../apis/indexApi'
    import List from '../components/list.vue'
    export default {
        data(){
            return{
                bannerList:[],  //轮播图列表
                productList:[],  //商品列表
                baseUrl:'http://10.7.162.81:15666'
            }
        },

        // 组成组件
        components:{
            List
        },

        created(){
            getBanner().then(resolve => {
                    resolve.data.forEach(item => {
                        this.bannerList.push(item.path)
                    });
            })

            // 周边接口
            getAroundProduct({page:1,size:10}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        id: item.itemsId,
                        imgUrl: item.itemsImg,
                        name: item.name,
                        price: item.price,
                        type:'around'
                    }
                    this.productList.push(obj)
                })
            })

            // 演出接口
            getShowProduct({page:1,size:3}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        id: item.id,
                        imgUrl: item.cover,
                        name: item.project_name,
                        price: item.price_low,
                        type:'show'
                    }
                    this.productList.push(obj)
                })
            })

            // 电影接口
            getMovieProduct({page:1,size:3}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        id: item.id,
                        imgUrl: item.img,
                        name: item.name,
                        price: item.dur,
                        type:'move'
                    }
                    this.productList.push(obj)
                })
            })
            
        },

        methods:{
            

            // 周边特惠
            priceLow(){
                this.$router.push({
                    name:'type',
                    params:{
                        type:'priceLow'
                    }
                })
            },

            // 周边排行
            aroundRanking(){
                this.$router.push({
                    name:'type',
                    params:{
                        type:'aroundRanking'
                    }
                })
            },

            // 观影推荐
            Move(){
                this.$router.push({
                    name:'type',
                    params:{
                        type:'Move'
                    }
                })
            },

            // 最新电影
            newMove(){
                this.$router.push({
                    name:'type',
                    params:{
                        type:'newMove'
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .bigBox{
        width: 100%;
        height: calc(100% - 50px);
        overflow-x: hidden;
        background-color: rgb(246,246,246);
        header{
            width: 100%;
            height: 230px;
            padding: 0 20px;
            padding-top: 30px;
            background: linear-gradient(rgb(252,105,95) 0%,rgb(246,246,246) 76%);
            .store-name{
                width: 100%;
                height: 50px;
                text-align: center;
                color: #fff;
                font-weight: bold;
            }
            .search{
                height: 50px;
                display: flex;
                justify-content: space-between;
                .search-box{
                    width: 85%;
                    height: 50px;
                    padding-left: 12px;
                    display: flex;
                    align-items: center;
                    background-color: white;
                    border-radius: 25px;
                    input{
                        width: 80%;
                        height: 48px;
                        margin-left: 8px;
                        background-color: white;
                        border: 0 solid #000;
                        &::placeholder{
                            font-size: 0.8rem;
                            color: rgb(187, 187, 187);
                        }                   
                    }
                }
                span{
                    display: block;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    background-color: rgba(146, 97, 97,0);
                    border: 0 solid #000;
                    color: #fff;
                }
            }
            .index-type{
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                .type-item{
                    text-align: center;
                    width: 16%;
                    font-size: 0.6rem;
                    color: #666;
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .banner{
            width: 100%;
            height: 160px;
            margin-top: 16px;
            display: flex;
            justify-content: space-around;
            background-color: rgb(246,246,246);
            .my-swipe{
                width: 90%;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
    }
</style>